<template>
  <div class="radio-container">
    <div class="radio-item" v-for="(item, index) in roleList" :key="index">
      <input type="radio" :id="index" :value="item.id" v-model="role">
      <label :for="index">{{ item.coupon_code }}</label>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'VRadio',
    props: {
      roleList: {
        type: Array,
        default () {
          return ['11111111111', '22222222222']
        }
      }
    },
    data () {
      return {
        role: 1
      }
    },
    watch: {
      role (val) {
        this.$emit('choose-radio', val)
      }
    }
  }
</script>

<style scoped>
.radio-container > div:last-of-type {
  margin-bottom: 0;
}
.radio-item {
  text-align: left;
  margin-bottom: 12px;
}
input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

input[type="radio"] + label {
  margin-right: 30px;
  padding-left: 26px;
  position: relative;
}

input[type="radio"] + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 0;
}

input[type="radio"]:checked + label::before {
  border: 1px solid #FF600A;
}

input[type="radio"]:checked + label::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  background-color: #FF600A;
}
</style>
